<template>
  <div>
    <div class="avatar-wrap" v-if="conversation">
      <el-badge
        :value="conversation.user_unread"
        :hidden="conversation.user_unread < 1"
        type="danger"
      >
        <div class="avatar" v-html="avatar" :style="{ background: color }"></div>
      </el-badge>
    </div>
    <div class="profile">
      <div class="nickname">{{ conversation.guest.name }}</div>
      <div class="vip" v-if="conversation.guest.vip">
        <img src="/public/vip.png" alt />
      </div>
      <div class="latest_msg" v-html="late_msg"></div>
      <div class="latest_time">{{ late_msg_at }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue"
import multiavatar from "@multiavatar/multiavatar"
import { fmtLatestMsg, simplifyDate } from "../../../../utils/helper"

const props = defineProps({
  conversation: {
    type: Object,
    required: true,
  },
})

const avatar = multiavatar(props.conversation.guest.uid, true)

const color = `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`

const late_msg = computed(() => {
  return fmtLatestMsg(props.conversation.late_msg)
})

const late_msg_at = computed(() => {
  return simplifyDate(props.conversation.late_msg.created_at)
})

</script>

<style scoped>
</style>